<!doctype html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Ruan Souza">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" type="text/css" href="css/all.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <title>pagina inicial</title>
        <style>
            /* inicio estilo card tabela */
            .tabela_card_1
            {
                width: 145px; 
                margin: 2px; 
                border-color: #cccccc;
            }

            .tabela_td_card_1
            {
                height: 145px;
            }

            .tabela_img_card_1
            {
                width: auto; 
                max-width: 145px; 
                height: auto; 
                max-height: 145px;
            }

            .tabela_td_card_2
            {
                height: 110px; 
                padding: 3px;
            }
            
            .tabela_td_card_3
            {
                height: 28px; 
                padding: 3px;
            }

            .p_sem_margin
            {
                margin-bottom: 0px;
            }

            .p_doze
            {
                font-size: 12px;
            }

            .p_nome_produto_card
            {
                font-size: 14px;
            }

            .p_nome_vendedor_card
            {
                color: #737373;
            }
            /* fim estilo card tabela */

            @media screen and (max-width: 767px)
            {
                .responsivo_forcado
                {
                    display: none;
                }
            }
            @media screen and (max-width: 425px) 
            {
                .responsivo_forcado_2
                {
                    display: none;
                }
            }
            @media screen and (min-width: 426px) 
            {
                .responsivo_forcado_3
                {
                    display: none;
                }
            }
            @media screen and (min-width: 767px)
            {
                /* inicio estilo card tabela */
                .tabela_card_1
                {
                    width: 240px; 
                }

                .tabela_td_card_1
                {
                    height: 240px;
                }

                .tabela_img_card_1
                {
                    max-width: 240px; 
                    max-height: 240px;
                }

                .p_doze
                {
                    font-size: 14px;
                }

                .p_nome_produto_card
                {
                    font-size: 20px;
                }
                /* fim estilo card tabela */
            }
        </style>
    </head>
    <body>
        <!--inicio da navbar principal-->
        <nav class="navbar navbar-expand-md navbar-dark" style="background-color: #000;">
            <!--inicio botão de menu hanbuger tela pequena-->
            <button class="btn btn-link d-md-none p-0 ml-3 collapsed" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!--fim botão de menu hanbuguer tela pequena-->
            <!--inicio logo e nome do site-->
            <a class="navbar-brand" href="#">
                <img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
                Roma Inc.
            </a>
            <!--fim logo e nome do site-->
            <!--inicio botão de login tela pequena-->
            <button class="btn btn-outline-warning btn-sm d-md-none" type="button" data-toggle="modal" data-target="#modal_login" style="right: 9px;">
                <i class="fas fa-user-circle"></i>
            </button>
            <!--fim botão de login tela pequena-->
            <!--inicio menu-->
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    <!--inicio do menu dropdown-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Categorias
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">categoria 1</a>
                            <a class="dropdown-item" href="#">categoria 2</a>
                            <a class="dropdown-item" href="#">categoria 3</a>
                        </div>
                    </li>
                    <!--fim do menu dropdown-->
                    <a class="nav-item nav-link" href="#">vendedores<span class="sr-only">(current)</span></a>
                </div>
            </div>
            <!--fim do menu-->
            <!--inicio barra de pesquisa tela grande-->
            <form class="w-50 responsivo_forcado">
            <div class="input-group responsivo_forcado">
                <input class="form-control form-control-sm d-none d-md-block" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-prepend">
                    <button class="btn btn-outline-warning btn-sm d-none d-md-block" type="submit"><i class="fas fa-search"></i></button>
                </div>
            </div>
            </form>
            <!--fim barra de pesquisa tela grande-->
            <!--botão de login tela grande-->
            <button class="btn btn-outline-warning btn-sm d-none d-md-block" type="button" data-toggle="modal" data-target="#modal_login" style="margin-left:10px">
                <i class="fas fa-user-circle"></i>
            </button>
            <!--fim botão de login tela grande-->
        </nav>
        <!--fim da navbar principal-->
        <!--inicio da navbar secundaria apenas para tela pequena-->
        <nav class="navbar navbar-expand-md navbar-dark d-md-none" style="background-color: #000;">
            <!--inicio barra de pesquisa tela pequena-->
            <form class="w-100">
            <div class="input-group">
                <input class="form-control form-control-sm" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-prepend">
                    <button class="btn btn-outline-warning btn-sm" type="submit"><i class="fas fa-search"></i></button>
                </div>
            </div>
            </form>
            <!--fim barra de pesquisa tela pequena-->
        </nav>
        <!--fim da navbar secundaria-->
        <form>
        <!--inicio modal de login -->
        <div class="modal fade" id="modal_login" tabindex="-1" role="dialog" aria-labelledby="modal_login" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modal_login">Login</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!--inicio do formulario de login-->
                    <div class="modal-body">
                        
                        <div class="form-group">
                            <label for="email_login">E-mail</label>
                            <input type="email" class="form-control" id="email_login" aria-describedby="emailHelp" placeholder="nome@exemplo.com">
                            <small id="emailHelp" class="form-text text-muted">digite seu E-mail completo que você cadastrou</small>
                        </div>
                        <div class="form-group">
                            <label for="senha_login">Senha</label>
                            <input type="password" class="form-control" id="senha_login" placeholder="digite sua senha aqui">
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="manter_login">
                            <label class="form-check-label" for="manter_login">Manter logado?</label>
                        </div>                        
                    </div>
                    <!--fim do formulario de login-->
                    <div class="modal-footer">
                        <a class="btn btn-dark" href="cadastro_usuario.html" role="button">Não é cadastrado?</a>
                        <button type="button" class="btn btn-warning">Logar</button>
                    </div>
                </div>
            </div>
        </div>
        </form>
        <!--fim modal de login-->

        <!--inicio do carrosel tela grande-->
        <div class="bd-example">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <!--inicio primeiro slide-->
                    <div class="carousel-item active">
                        <!--inicio primiera imagem-->
                            <!--imagem tela pequena-->
                            <img src="tela_pequena.png" alt="" class="w-100 responsivo_forcado_3">
                            <!--imagem tela grande-->
                            <img src="tela_grande.png" alt="" class="w-100 responsivo_forcado_2">
                        <!--fim primeira imagem-->
                        <!--inicio texto primeiro slide-->
                        <div class="carousel-caption">
                            <h5>First slide label</h5>
                            <p>Nulla vitae elit libero, a pharetra augue mollis</p>
                        </div>
                        <!--fim texto primeiro slide-->
                    </div>
                    <!--fim primeiro slide-->
                    <!--inicio segundo slide-->
                    <div class="carousel-item">
                        <!--inicio segunda imagem-->
                            <!--imagem tela pequena-->
                            <img src="tela_pequena.png" alt="" class="w-100 responsivo_forcado_3">
                            <!--imagem tela grande-->
                            <img src="tela_grande.png" alt="" class="w-100 responsivo_forcado_2">
                        <!--fim segunda imagem-->
                        <!--inicio texto segundo slide-->
                        <div class="carousel-caption">
                            <h5>Second slide label</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                        <!--fim texto segundo slide-->
                    </div>
                    <!--fim segundo slide-->
                    <!--inicio terceiro slide-->
                    <div class="carousel-item">
                        <!--inicio terceira imagem-->
                            <!--imagem tela pequena-->
                            <img src="tela_pequena.png" alt="" class="w-100 responsivo_forcado_3">
                            <!--imagem tela grande-->
                            <img src="tela_grande.png" alt="" class="w-100 responsivo_forcado_2">
                        <!--fim terceira imagem-->
                        <!--inicio texto terceiro slide-->
                        <div class="carousel-caption">
                            <h5>Third slide label</h5>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl.</p>
                        </div>
                        <!--fim texto terceiro slide-->
                    </div>
                    <!--fim do terceiro slide-->
                </div>
                <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <!--fim do carrosel tela grande-->

        <!--inicio produtos bem avaliados-->
        <p class="h4 text-center text-capitalize" style="margin-top: 1.5em;">produtos bem avaliados pelos usuarios</p>
        <div class="table-responsive">
            <table align="center">
                <tr>
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_2">
                                    <p class="p_nome_produto_card p_sem_margin">nome do produto</p>
                                    <p class="p_nome_vendedor_card p_doze">nome do vendedor</p>
                                    <p class="p_doze p_sem_margin">BTC 0,00000001</p> 
                                    <p class="p_doze">BTC 0,00000001</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_2">
                                    <p class="p_nome_produto_card p_sem_margin">nome do produto</p>
                                    <p class="p_nome_vendedor_card p_doze">nome do vendedor</p>
                                    <p class="p_doze p_sem_margin">BTC 0,00000001</p> 
                                    <p class="p_doze">BTC 0,00000001</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_2">
                                    <p class="p_nome_produto_card p_sem_margin">nome do produto</p>
                                    <p class="p_nome_vendedor_card p_doze">nome do vendedor</p>
                                    <p class="p_doze p_sem_margin">BTC 0,00000001</p> 
                                    <p class="p_doze">BTC 0,00000001</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                </tr>
            </table>
        </div>
        <!--fim produtos bem avaliados-->

        <!--inicio vendedores em destaque-->
        <p class="h4 text-center text-capitalize" style="margin-top: 1.5em;">vendedores bem avaliados</p>
        <div class="table-responsive">
            <table align="center">
                <tr>
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_3">
                                    <p class="p_nome_produto_card p_sem_margin">nome do vendedor</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_3">
                                    <p class="p_nome_produto_card p_sem_margin">nome do vendedor</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_3">
                                    <p class="p_nome_produto_card p_sem_margin">nome do vendedor</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                </tr>
            </table>
        </div>
        <!--fim vendedores em destaque-->

        <!--inicio moedas aceitas-->
        <p class="h4 text-center text-capitalize" style="margin-top: 1.5em;">Criptomoedas aceitas</p>
        <div class="table-responsive">
            <table align="center">
                <tr>
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_3">
                                    <p class="p_nome_produto_card p_sem_margin">nome da moeda</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_3">
                                    <p class="p_nome_produto_card p_sem_margin">nome da moeda</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_3">
                                    <p class="p_nome_produto_card p_sem_margin">nome da moeda</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                    <!--inicio coluna card-->
                    <td align="center">
                        <table class="shadow tabela_card_1" border="1px" align="left">
                            <tr>
                                <td class="tabela_td_card_1">
                                    <img src="tela_grande.png" class="align-middle tabela_img_card_1" alt="...">
                                </td>
                            </tr>
                            <tr>
                                <td class="tabela_td_card_3">
                                    <p class="p_nome_produto_card p_sem_margin">nome da moeda</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <!--fim coluna card-->
                </tr>
            </table>
        </div>
        <!--fim moedas aceitas-->

        <!--inicio rodapé-->
        <nav class="navbar fixed-bottom navbar-light navbar-expand-md" style="position: relative; bottom: 0px; margin-top: 1.5em; background-color: #d9d9d9;">
            <!--inicio nome site tela grande-->
            <a class="navbar-brand d-none d-md-block" href="#">Roma Inc. Marketplace</a>
            <!--fim nome site tela grande-->
            <!--inicio menu-->
            <div class="collapse navbar-collapse" id="inferior">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="#">Termos de uso <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#">Politicas de privacidade</a>
                    <a class="nav-item nav-link" href="#">Contato</a>
                    <a class="nav-item nav-link" href="#" tabindex="-1" aria-disabled="true">Quem Somos</a>
                </div>
            </div>
            <!--fim menu-->
            <!--inicio nome do site tela pequena-->
            <a class="navbar-brand d-md-none" href="#">Roma Inc. Marketplace</a>
            <!--fim nome do site tela pequena-->
            <!--inicio botão de menu hanbuger tela pequena-->
            <button class="btn btn-link d-md-none p-0 ml-3 collapsed" type="button" data-toggle="collapse" data-target="#inferior" aria-controls="inferior" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>         
            <!--fim botão de menu hanbuger tela pequena-->
        </nav>
        <!--fim rodapé-->

        <script type="text/javascript" src="js/jquery-3.4.1.slim.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
    </body>
</html>
